<template>
  <div>
    <el-dialog title="导入" width="30%" :visible.sync="visible" :before-close="clan">
      <div class="upLoadBox">
         <el-button type="text" @click="downLoad">下载模板</el-button>
      <el-upload :http-request="beforeAvatarUpload" v-loading="loading" element-loading-text="拼命导入中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(ff, ff, ff, 0.2)" class="upload-demo" drag action="#" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
      </el-upload>
      </div>
      <div style="text-align: right; margin-top: 20px">
        <el-button type="primary" size="small" @click="clan" class="clanBtn">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import API from "@/http/apis/modules/backStageChannalComiss";
export default {
  props: ["visible"],

  data() {
    return {
      loading: false,
      valueInfo: "",
    };
  },
  methods: {
    //下载模板
    downLoad() {
      window.location.href = "./后台渠道返佣认领单导入模版.xlsx";
    },

    beforeAvatarUpload(data) {
      this.loading = true;
      let fd = new FormData();
      fd.append("file", data.file);
      API.importData(fd).then((res) => {
        if (res.data.code === "SUCCESS") {
          this.loading = false;
          this.$message({
            type: "success",
            message: res.data.msg,
            duration: 5000,
          });
          this.$emit("getuploadprops", false);
          //调用父级列表查询接口
          this.$parent.getAllList();
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg,
            duration: 20000,
          });
          this.loading = false;
        }
      });
    },

    // 关闭弹出框
    clan() {
      this.$emit("getuploadprops", false);
    },
  },
};
</script>

<style lang="less" scoped>
.upLoadBox{
  margin:0 auto;
  text-align: center;
}
</style>